<!--文章页面-->
<template>
  <div class="center">
    <!--头部-->
    <section class="news_header-section">
      <h2 class="news-title">{{post.title}}</h2>

      <div class="news-function">
        <div class="news-function-left">
      <div class="news-time">{{ post.publishTime }}</div>
      <div class="news-from">| 来源:<span>{{post.origin}}</span></div>
        </div>
      <div class="news-operate">
        <div class="operate-item operate-font">
          <div class="news-svg font-svg"></div>
          <div class="operate-text font-text">字体调整</div>
        </div>

        <div class="operate-item operate-read">
          <div class="news-svg read-svg"></div>
          <div class="operate-text read-text">为您朗读</div>
        </div>
      </div>
      </div>

      <div class="news-fire">
        <ul class="fire-module">
          <li class="fire-list">
            <div class="news-svg collect-svg"></div>
            <div class="fire-text collect-text">收藏<span>2233</span></div>
          </li>

          <li class="fire-list">
            <div class="news-svg look-svg"> </div>
            <div class="fire-text look-text">浏览<span>8888</span></div>
          </li>
        </ul>
      </div>

    </section>

    <!--悬浮栏-->
    <Suspension></Suspension>

    <div class="content">
      <!--            主要内容左侧-->
      <div class="content-left">
        <!--                /////////////////-->
        <!--                新闻文章模块-->
        <TextContent :content="post.content" :compiler="post.compiler"></TextContent>
        <!--                /////////////////////////////////////////////-->
        <!--                新闻发表评论模块-->
        <Remark style="margin-bottom: 10px"></Remark>
      </div>
      <!--            ///////////////////////////////////////-->
      <!--            主要内容右侧-->
      <div class="content-right">
        <!--                /////////////////////////-->
        <!--                热点速看模块-->
        <Hotspot></Hotspot>

        <!--                /////////////////////////-->
        <!--                图片展示模块-->
        <PhotoShow></PhotoShow>

        <!--                /////////////////////////////////-->
        <!--                为您推荐模块-->
        <Recommend></Recommend>

        <!--                ///////////////////-->
        <!--                最右侧页脚维权部分-->
        <Safeguard></Safeguard>

      </div>

    </div>
  </div>

</template>

<script setup>

import TextContent from "../../components/textcontent/TextContent.vue";
import Hotspot from "./components/Hotspot.vue";
import PhotoShow from "./components/PhotoShow.vue";
import Suspension from "../../components/suspension/Suspension.vue";
import Recommend from "../../components/recommend/Recommend.vue";
import Safeguard from "./components/Safeguard.vue";
import Remark from "../../components/remark/Remark.vue";
import {useRoute} from "vue-router";
import {onMounted, ref} from "vue";
import {getPost} from "../../api/resourceApi.js";

const route = useRoute()

const postId = route.query.id

const post = ref({
  title:"值得一提的是，全国灯会灯彩项目展在秦淮非遗馆同时举办。",
  publishTime:"2023/2/15"
})

const getPostData = async ()=>{
  const res = await getPost(postId)
  post.value = res.data
}

onMounted(()=>{
  getPostData()
})

</script>

<style scoped>
.center{
  width:100%;
  /*background-color: yellow;*/
  background-color: rgba(229, 229, 229, 1);
  margin: 0 auto;
  letter-spacing: 3px;
}

/*主要内容*/
.content{
  /*height:180rem;*/
  /*background-color: green;*/
  margin: 2rem 25rem 0rem 25rem;
  display: flex;
}


/*主要内容左侧*/
.content-left{
  width: 70rem;
  border-radius: 5px;

}

/*主要内容右侧*/
.content-right{
  width: 31rem;
  margin-left: 2rem;
  /*position: fixed;*/
  /*background-color: rgba(255, 255, 255, 1);*/
  /*box-shadow: 0px 2px 4px  rgba(0, 0, 0, 0.25);*/
}

/*新闻头部标题模块*/


.news_header-section{
  width:100%;
  //height:16rem;
  position: relative;
  background-color: rgb(255, 255, 255);
  /*background-color: red;*/
  color: rgba(128, 128, 128, 1);
  padding-bottom: 5rem;
}

.news-title{
  width:85rem;
  margin: 0 auto;
  //background-color: red;
  font-weight: 700;
  font-size: 3.5rem;
  margin-left: 28.5rem;
  padding-top: 3.5rem;
  color: rgb(0,0,0);
  letter-spacing: 10px;
}
.news-function{
  width:85rem;
  //background-color: #747bff;
  margin: 0 auto;
  display: flex;
  margin-left: 28.5rem;
  margin-top: 2rem;
  padding-right: 3rem;
  justify-content: space-between;
}
.news-function-left{
  display: flex;
}
.news-time{
  //position: absolute;
  font-size: 12px;
  //left:28.5rem;
  //top:10.5rem;
  letter-spacing: 2px;
}
.news-from{
  //position: absolute;
  //left:45rem;
  //top:10.5rem;
  font-size: 12px;
  letter-spacing: 2px;
}
.news-operate{
  //top:10rem;
  //left:59rem;
  //position:absolute;
  width:25rem;
  justify-content: space-around;
  /*background-color: yellow;*/
  display: flex;
}
.operate-item {
  cursor: pointer;
  width: 8rem;
  height: 2.5rem;
  border-radius: 25px;
  display: flex;
  line-height: 2.5rem;
  border: 2px solid rgba(156, 0, 0, 1);
}

.news-svg{
  width:2rem;
  height:2rem;
  background-size: 1.5rem 1.5rem;
  background-position: center;
}
.font-svg{

}
.read-svg{

}
.collect-svg{

}
.look-svg{

}
.operate-text{
  font-size: 11px;
  text-align: center;
  font-weight: 700;
  line-height: 2rem;
  color:rgba(156, 0, 0, 1);
}

.news-fire{
  top:4rem;
  right:24rem;
  position: absolute;
  width:10rem;
  /*background-color: yellow;*/
}
.fire-module{

}
.fire-list{
  display: flex;
  margin-top: 1rem;

}
.fire-text{
  font-weight:normal;
  font-family: 微软雅黑;
  font-size: 13px;
  letter-spacing: 1px;
  color:rgba(128, 128, 128, 1);
}



</style>
